import React, { useState } from 'react'
import { Form, Input, Button, Card, Row, Col, Typography, message } from 'antd'
import { MailOutlined, SafetyCertificateOutlined } from '@ant-design/icons'
import { useNavigate } from 'react-router'
import './index.css'

const { Title } = Typography;

const ForgotPasswordPage = () => {
    const [loading, setLoading] = useState(false);
    const [emailSent, setEmailSent] = useState(false);
    const router = useNavigate()
    const onFinish = (values: any) => {
        setLoading(true);
        setTimeout(() => {
            setLoading(false);
            setEmailSent(true);
            message.success('重置密码邮件已发送，请检查您的邮箱');
        }, 1500);
    };

    const handleBackToLogin = () => {
        router('/login')
    };

    return (
        <div className="forgot-password-container">
            <Row justify="center" align="middle" style={{ minHeight: '100vh' }}>
                <Col xs={20} sm={16} md={12} lg={8} xl={6}>
                    <Card className="forgot-password-card">
                        <div className="forgot-password-header">
                            <Title level={2} style={{ textAlign: 'center', margin: 0 }}>
                                企业办公系统
                            </Title>
                            <p className="forgot-password-subtitle">重置您的密码</p>
                        </div>

                        {!emailSent ? (
                            <Form
                                name="forgot_password"
                                className="forgot-password-form"
                                initialValues={{ remember: true }}
                                onFinish={onFinish}
                            >
                                <Form.Item
                                    name="email"
                                    rules={[
                                        { required: true, message: '请输入邮箱!' },
                                        { type: 'email', message: '请输入有效的邮箱地址!' }
                                    ]}
                                >
                                    <Input
                                        prefix={<MailOutlined />}
                                        placeholder="注册邮箱"
                                        size="large"
                                    />
                                </Form.Item>

                                <Form.Item>
                                    <Button
                                        type="primary"
                                        htmlType="submit"
                                        className="forgot-password-form-button"
                                        loading={loading}
                                        block
                                        size="large"
                                    >
                                        发送重置链接
                                    </Button>
                                </Form.Item>

                                <div className="forgot-password-footer">
                                    <a onClick={handleBackToLogin} style={{ cursor: 'pointer' }}>
                                        返回登录
                                    </a>
                                </div>
                            </Form>
                        ) : (
                            <div className="password-reset-success">
                                <SafetyCertificateOutlined style={{ fontSize: '48px', color: '#52c41a', marginBottom: '16px' }} />
                                <Title level={3} style={{ textAlign: 'center', margin: '8px 0' }}>
                                    重置链接已发送
                                </Title>
                                <p className="success-message">
                                    我们已向您的邮箱发送了一封包含重置密码链接的邮件。<br />
                                    请检查您的收件箱和垃圾邮件文件夹。
                                </p>
                                <Button
                                    type="primary"
                                    onClick={handleBackToLogin}
                                    block
                                    size="large"
                                >
                                    返回登录
                                </Button>
                            </div>
                        )}
                    </Card>
                </Col>
            </Row>
        </div>
    );
};

export default ForgotPasswordPage